<template>
  <div class="comments">
    <myheader title="精彩评论">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
    </myheader>
    <div class="lists">
      <div class="item" v-for="comment in commentList" :key="comment.id">
        <div class="head">
          <img :src="comment.user.head_img" alt />
          <div>
            <p>{{ comment.user && comment.user.nickname }}</p>
            <span>{{ comment.create_date | offsetdateFormat("-") }}</span>
          </div>
          <span @click="relpayComment(comment)">回复</span>
        </div>
        <commentItem
          v-if="comment.parent"
          :commentParent="comment.parent"
          @sendComment="relpayComment"
        ></commentItem>
        <div class="text">{{ comment.content }}</div>
      </div>
    </div>
    <commentFooter
      :article="post"
      @refershData="refershCommentList"
      :comment="temp"
      @resetComment="temp = null"
    ></commentFooter>
  </div>
</template>

<script>
import myheader from "@/components/hmheader.vue";
import commentItem from "@/components/commentItem.vue";
import commentFooter from "@/components/commentFooter.vue";
import { post_comment, articleDetail } from "@/apis/post.js";
import axios from "@/utils/myaxios.js";
import { offsetdateFormat } from "@/utils/myfilters.js";
export default {
  components: {
    myheader,
    commentFooter,
    commentItem,
  },
  filters: {
    offsetdateFormat,
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      commentList: [],
      post: {},
      temp: {}, // 传递给子组件commentFooter
    };
  },
  methods: {
    // 初始化评论列表
    async init() {
      let res = await post_comment(this.$route.params.id);
      console.log("评论列表", res);
      if (res.status == 200) {
        this.commentList = res.data.data.length > 0 ? res.data.data : [];
        this.commentList = this.commentList.map((item) => {
          item.user.head_img = axios.defaults.baseURL + item.user.head_img;
          return item;
        });
      }
      //
      let postData = await articleDetail(this.$route.params.id);
      // console.log("文章详情数据", postData);
      this.post = postData.data.data;
    },
    // 直接点击回复评论
    relpayComment(value) {
      console.log("value", value);
      this.temp = value;
    },
    // 评论完自动刷新评论页
    refershCommentList() {
      this.init();
      // 页面自动滚回顶部
      window.scrollTo(0, 0);
    },
  },
};
</script>

<style lang='less' scoped>
.comments {
  padding-bottom: 60px;
}
.lists {
  border-top: 5px solid #ddd;
  padding: 0 15px;
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      > img {
        width: 50/360 * 100vw;
        height: 50/360 * 100vw;
        display: block;
        border-radius: 50%;
      }
      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        > span {
          font-size: 12px;
          color: #999;
          line-height: 25px;
        }
      }
      > span {
        color: #999;
        font-size: 13px;
      }
    }
    .text {
      font-size: 14px;
      color: #333;
      padding: 20px 0 10px 0;
    }
  }
}
</style>